<template>
    <div style="height: 560px;">
        <div class="nav-bar">
            <el-menu text-color="#666" active-text-color="#21B794" @select="handleSelect" :default-active="activeIndex"
                class="el-menu-demo" mode="horizontal">
                <el-menu-item :index="item.id" v-for="(item) in navBar">{{ item.name }}</el-menu-item>
            </el-menu>
        </div>
        <div class="asset-container">
            <!-- 资产详情 -->
            <div class="asset-detail ov-auto" v-show="activeIndex == '1'">
                <!-- <custom-head :text="staticData[0].columnName" v-if="staticData[0]"></custom-head> -->
                <div class="detail-wrap">
                    <template v-for="(row) in staticData">
                        <template v-for="cloumn in row">
                            <div class="flex-jsb">
                                <div v-for="item in cloumn" class="flex-ac mt15">
                                    <span class="left-text text-ov">
                                        {{ item.columnComments }}:
                                    </span>
                                    <span class="ml25">{{ item.columnName }}</span>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </div>
            <!-- 数据监控 -->
            <div class="asset-detail custom-table-head" v-show="activeIndex == '2'">
                <el-table stripe :data="dynamicData" style="width: 100%;height: 80%;">
                    <el-table-column prop="columnComments" label="监控项">
                    </el-table-column>
                    <el-table-column prop="dateTime" label="采集时间">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.dateTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="columnValue" label="当前值">
                        <template slot-scope="scope">
                            <div>{{ scope.row.columnValue ? Math.floor(Number(scope.row.columnValue)) : "" }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 历史曲线 -->
            <div class="asset-detail" v-show="activeIndex == '3'">
                <div class="flex-jsb">
                    <el-select v-model="form.dimension" size="small" placeholder="请选择" @change="selectChange">
                        <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                    <div>
                        <el-radio-group v-model="form.radio" @input="changeInput" size="small">
                            <el-radio-button label="今日">今日</el-radio-button>
                            <el-radio-button label="本周">本周</el-radio-button>
                            <el-radio-button label="本月">本月</el-radio-button>
                            <el-radio-button label="全年">全年</el-radio-button>
                        </el-radio-group>
                        <el-date-picker class="ml25" size="small" @change="changeDate" value-format="yyyy-MM-dd"
                            v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <div id="curveId"></div>
            </div>
            <!-- 告警信息 -->
            <div class="asset-detail custom-table-head" v-show="activeIndex == '4'">
                <el-table stripe :data="alarmInfo" height="570" style="width: 100%">
                    <el-table-column prop="outTitle" label="告警项" />
                    <el-table-column prop="alterTime" label="告警时间">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.alterTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarmDesc" label="告警信息" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getMonitorData, getAlterListByResourceId,
    historyCureItem, getAssetsDetail,
    getHistoryDate, getMonitorStaticDetail
} from "@/api/computerRoomApi.js";
import utils from "@/utils/date.js"
import echarts from 'echarts'
import imgSrc from "../../utils/imgSrc";
export default {
    props: {
        resourceId: {
            type: String,
        },
        resourceTypeId: {
            type: String,
        }
    },
    data() {
        return {
            form: {
                selectValue: "",//下拉选中
                hostName: "",//主机名
                resourceName: "",//资源名
                radio: "今日",//
                startDate: "",//开始日期
                endDate: "",
                dimension: "",//维度
            },
            navBar: [
                { name: "资产详情", id: "1" },
                { name: "数据监控", id: "2" },
                { name: "历史曲线", id: "3" },
                { name: "告警信息", id: "4" },
            ],
            activeIndex: "1",
            roomInfo: {},//机房信息
            cabinetInfo: {},//当前选中的机柜信息
            assetDetail: {},//资产详情
            environment: [],
            dynamicData: [],//动态数据
            staticData: [],//静态数据 
            historicalCurve: [],//历史曲线
            options: [],
            tableData: [],
            alarmInfo: [],//告警信息 
            chart: {},
            chartData: {},
        }
    },
    mounted() {
        this.initCanvas();
        this.handleSelect(this.activeIndex)
    },
    computed: {

    },
    methods: {
        // 单选日期
        changeInput(label) {
            const { start, end } = utils.getStartAndEndDates(label)
            this.form.startDate = start;
            this.form.endDate = end;
            if (this.form.dimension) {
                this.getHistoryDate(this.resourceId, this.form.dimension, start, end);
            }
        },
        // 手动选择日期
        changeDate(value) {
            if (this.form.dimension) {
                this.form.startDate = utils.formatter(value[0] + " 00:00", "yyyy-MM-dd hh:mm");
                this.form.endDate = utils.formatter(value[1] + " 23:59", "yyyy-MM-dd hh:mm");
                this.getHistoryDate(this.resourceId, this.form.dimension, this.form.startDate, this.form.endDate)
            }
        },
        // nav 切换
        handleSelect(key) {
            this.activeIndex = key;
            switch (key) {
                case '1':
                    this.getMonitorStaticDetail(this.resourceId, this.resourceTypeId)
                    break;
                case '2':
                    this.getMonitorData(this.resourceId, this.resourceTypeId)
                    break;
                case '3':
                    this.historyCureItem(this.resourceId, this.resourceTypeId)
                    this.changeInput(this.radio)
                    // this.getHistoryDate(resourceId, this.form.dimension, this.form.startDate, this.form.endDate)
                    break;
                default:
                    this.getAlterListByResourceId(this.resourceId)
                    break;
            }
        },
        // 历史曲线 下拉
        historyCureItem(resourceId, resourceTypeId) {
            historyCureItem({ resourceId, resourceTypeId }).then(res => {
                if (res.code == "200") {
                    this.options = res.info;
                    if (this.options.length) {
                        this.form.dimension = this.options[0].code
                    }
                }
            })
        },
        getImgSrc(type, id) {
            return imgSrc(type, id)
        },
        initCanvas() {
            var chartDom = document.getElementById('curveId');
            this.chart = echarts.init(chartDom);
        },
        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },
        // 历史曲线
        getHistoryDate(resourceId, code, startTime, endTime) {
            getHistoryDate({ resourceId, code, startTime, endTime }).then(res => {
                if (res.code == "200") {
                    // this.chartData = res.info;
                    // 
                    if (res.info.series[0]) {
                        this.setChartData(res.info)
                    }
                    return
                }
                this.$message(res.msg, 3)
            })
        },
        // 设置图表数据
        setChartData(chartData) {
            if (!this.chart) {
                this.initCanvas()
            }
            const { series, unit } = chartData;
            let dateArray = series[0].data.map((_, i) => {
                return utils.formatter(series[0].pointStart + i * series[0].pointInterval, "yyyy-MM-dd hh:mm:ss")
            })
            var option;
            option = {
                color: ['#21B795', '#FF9000'],
                title: {
                    text: series[0].name,
                    subtext: '最小值：24.2℃    最大值：47.0℃    平均值：35.5℃',
                    left: '15%',
                    top: "2%",
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                    // 鼠标悬浮显示线
                    axisPointer: {
                        lineStyle: {
                            color: "#21B795",
                            type: 'dashed'
                        },
                        type: "line"
                    },
                },
                legend: {
                    type: "plain",
                    show: true,
                    y: "bottom",
                    itemWidth: 20,
                    itemHeight: 3,
                    icon: "rect"
                },

                yAxis: {
                    type: 'value',
                    name: unit ? unit : "",
                    nameTextStyle: {
                        padding: [0, 60, 0, 0]
                    }
                },
                xAxis: {
                    type: 'category',
                    data: dateArray,//x
                },
                series: [
                    {
                        showSymbol: false,
                        data: series[0].data,//Y
                        type: 'line',
                        smooth: true,
                        name: series[0].name,
                        step: false
                    }
                ]
            };
            option && this.chart.setOption(option);
        },
        // 详情静态数据
        getMonitorStaticDetail(resourceId, resourceTypeId) {
            getMonitorStaticDetail({ resourceId, resourceTypeId }).then(res => {
                if (res.code == "200") {
                    this.staticData = res.info
                }
            })
        },
        // 历史曲线选择
        selectChange(value) {
            console.log(value);
            let { startDate, endDate } = this.form
            if (startDate && endDate) {
                this.getHistoryDate(this.resourceId, value, startDate, endDate)
            }
        },

        // 资产详情
        getDetail(resourceId, type) {
            getAssetsDetail({ resourceId: resourceId, type }).then(res => {
                if (res.code == "200") {
                    this.assetDetail = res.info
                }
            })
        },
        // 数据监控
        getMonitorData(resourceId, resourceTypeId) {
            getMonitorData({ resourceId, resourceTypeId }).then(res => {
                if (res.code == "200") {
                    this.dynamicData = res.info
                }
            })
        },
        // 告警信息
        getAlterListByResourceId(resourceId) {
            getAlterListByResourceId({ resourceId }).then(res => {
                if (res.code == "200") {
                    this.alarmInfo = res.info
                }
            })
        },

    },
    beforeDestroy() {
        // this.chart.dispose();
    },
}
</script>
<style lang="scss">
.asset-container {
    width: 100%;
    height: 80%;
    overflow: auto;

    .asset-detail {
        padding: 20px 16px;

        &.ov-auto {
            overflow: auto;

        }

        .detail-wrap {
            width: 80%;

            .flex-ac.mt15 {
                flex: 1
            }
        }

        .flex {
            margin-left: 12px;
            flex-wrap: wrap;

            &>div {
                width: 30%;
                margin-bottom: 20px;

                .left-text {
                    width: 120px;
                    margin-right: 30px;
                }

                span {
                    display: inline-block;
                }
            }
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            margin-bottom: 15px;
        }

        #curveId {
            width: 1000px;
            height: calc(100% - 40px);
        }

    }
}


/deep/ .el-table__header tr,
/deep/ .el-table__header th {
    background-color: var(--system-table-header-bgc) !important;
    color: #333;
    font-weight: 400;
}
</style>
